<template>
  <section class="login-big-box">
    <div class="bgimg">
      <img class="img" src="../assets/image/bg/7-1.png" alt="">
    </div>

    <div class="login-container">
      <div class="login-box">
        <h1>登录</h1>
        <form @submit.prevent="handleSubmit">
          <div class="form-group">
            <label class="tip-text" for="username">用户名</label>
            <input type="text" id="username" v-model="form.username" placeholder="请输入用户名" required
              @blur="validateForm" />
            <span class="error-message" v-if="errors.username">{{ errors.username }}</span>
          </div>
          <div class="form-group">
            <label class="tip-text" for="password">密码</label>
            <div class="password-input-container">
              <input :type="showPassword ? 'text' : 'password'" id="password" v-model="form.password"
                placeholder="请输入密码" required @blur="validateForm" />
              <span class="toggle-password" @click="togglePassword">
                <i :class="showPassword ? 'icon-eye-off' : 'icon-eye'">e</i>
              </span>
            </div>
            <span class="error-message" v-if="errors.password">{{ errors.password }}</span>
          </div>
          <div class="remember-me">
            <input type="checkbox" id="remember" v-model="form.remember" style="width:18px;height:18px;" />
            <label class="remember-text" for="remember">记住我</label>
          </div>
          <button type="submit" class="login-btn" :disabled="isLoading">
            <span v-if="!isLoading">登 录</span>
            <span v-else>登录中...</span>
          </button>
        </form>
      </div>
    </div>
  </section>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { encrypt, decrypt } from '@/utils/crypto'

export default {
  setup() {
    const router = useRouter()
    const form = ref({
      username: '',
      password: '',
      remember: false
    })
    const errors = ref({
      username: '',
      password: ''
    })
    const isLoading = ref(false)

    const showPassword = ref(false)

    const togglePassword = () => {
      showPassword.value = !showPassword.value
    }

    const validateForm = () => {
      let isValid = true

      if (!form.value.username.trim()) {
        errors.value.username = '请输入用户名'
        isValid = false
      } else {
        errors.value.username = ''
      }

      if (!form.value.password) {
        errors.value.password = '请输入密码'
        isValid = false
      } else if (form.value.password.length < 6) {
        errors.value.password = '密码长度不能少于6位'
        isValid = false
      } else {
        errors.value.password = ''
      }

      return isValid
    }

    const handleSubmit = async () => {
      if (!validateForm()) return

      isLoading.value = true

      try {
        // 记住用户名功能
        if (form.value.remember) {
          const data = {
            username: form.value.username,
            password: form.value.password,
            expires: Date.now() + 30 * 24 * 60 * 60 * 1000 // 30天过期
          }
          const encrypted = encrypt(JSON.stringify(data))
          localStorage.setItem('rememberedUsername', encrypted)
          // localStorage.setItem('rememberedUsername', form.value.username)
          // localStorage.setItem('rememberedPassword', form.value.password)
        } else {
          localStorage.removeItem('rememberedUsername')
        }

        // 模拟API请求
        await new Promise(resolve => setTimeout(resolve, 1000))
        console.log('登录成功')
        router.push('/home')
      } catch (error) {
        console.error('登录失败:', error)
      } finally {
        isLoading.value = false
      }
    }

    const getRememberedUsername = () => {
      const encrypted = localStorage.getItem('rememberedUsername')
      if (encrypted) {
        try {
          const data = JSON.parse(decrypt(encrypted))
          if (data.expires > Date.now()) {
            return data
          }
          localStorage.removeItem('rememberedUsername')
        } catch (error) {
          console.error('解密失败:', error)
          localStorage.removeItem('rememberedUsername')
        }
      }
      return null
    }

    // 检查是否有记住的账号
    onMounted(() => {
      // const savedUsername = localStorage.getItem('rememberedUsername')
      // const savedPassword = localStorage.getItem('rememberedPassword')
      const savedUsername = getRememberedUsername()
      // console.log(savedUsername, 'savedUsername==');

      if (savedUsername) {
        form.value.username = savedUsername.username
        form.value.password = savedUsername.password
        form.value.remember = true
      }
    })

    return {
      form,
      errors,
      isLoading,
      showPassword,
      togglePassword,
      handleSubmit
    }
  }
}
</script>

<style lang="less" scoped>
.login-big-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bgimg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;

  .img {
    width: 100%;
    height: 100%;
  }
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 450px;
  padding: 32px 48px 48px;
  // height: 46vh;
  background-color: rgba(201, 180, 255, 0.3);
  border-radius: 8px;
  box-shadow: 0 0px 3px rgba(156, 39, 176, 1);
}

.login-box {
  width: 100%;
  border-radius: 8px;

  .tip-text {
    font-size: 18px;
    color: #673AB7;
    font-weight: 600;
    text-shadow: 1px -1px #ff9800;
  }

}

h1 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #ffffff;
  font-size: 48px;
  margin: 0 0 12px;
  text-shadow: 3px 3px #000;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}

input {
  padding: 12px 16px;
  width: calc(100% - 16px * 2);
  border: 0px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s;
  box-shadow: 0 0px 3px rgba(156, 39, 176, 1);
}

input:focus {
  border-color: #9c27b0;
  outline: none;
}

.error-message {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 5px;
  display: block;
}

.remember-me {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.remember-me input {
  width: auto;
  margin-top: -2px;
  cursor: pointer;
}

.remember-text {
  user-select: none;
  cursor: pointer;
  padding-left: 8px;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background-color: #673ab7;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-btn:hover {
  background-color: #f44336;
}

.login-btn:disabled {
  background-color: #f44336;
  cursor: not-allowed;
}

.password-input-container {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
  user-select: none;
}

.toggle-password:hover {
  color: #333;
}

/* 平板设备 (768px 及以下) */
@media (max-width: 1024px) {
  .bgimg {
    display: flex;
    justify-content: center;
    align-items: center;

    .img {
      width: auto;
      height: 100%;
    }
  }

  .login-container {
    width: 56vw;
    background-color: #fff;
  }

  .login-box {
    padding: 20px;
    box-shadow: none;
    border-radius: 0;
    max-width: 100%;
  }

  input {
    padding: 10px 12px;
    font-size: 15px;
  }

  .login-btn {
    padding: 10px;
  }

  .toggle-password {
    margin-right: 8px;
  }
}

/* 手机设备 (480px 及以下) */
@media (max-width: 480px) {
  .bgimg {
    display: flex;
    justify-content: center;
    align-items: center;

    .img {
      width: auto;
      height: 100%;
    }
  }

  .login-container {
    width: 80vw;
    padding: 20px;
    background-color: #fff;
  }

  .form-group {
    margin-bottom: 15px;
  }

  label {
    font-size: 14px;
  }

  .remember-me label {
    font-size: 13px;
  }

  .toggle-password {
    margin-right: 8px;
  }

  .icon-eye,
  .icon-eye-off {
    width: 18px;
    height: 18px;
  }
}
</style>